<template>
  <el-form
    :model="formData"
    ref="form"
    label-width="120px"
    :rules="rules"
    class="register-form"
  >
    <el-card>
      <template #header>
        <h2 class="text-center">三年制新生报名登记表</h2>
      </template>
      <!-- 个人信息部分 -->
      <el-form-item label="学生姓名" prop="studentName">
        <el-input v-model="formData.studentName"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="formData.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="formData.age"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthDate">
        <el-date-picker
          v-model="formData.birthDate"
          type="date"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="籍贯" prop="hometown">
        <el-input v-model="formData.hometown"></el-input>
      </el-form-item>
      <el-form-item label="民族" prop="ethnicity">
        <el-input v-model="formData.ethnicity"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCard">
        <el-input v-model="formData.idCard"></el-input>
      </el-form-item>
      <el-form-item label="初中毕业学校" prop="juniorSchool">
        <el-input v-model="formData.juniorSchool"></el-input>
      </el-form-item>
      <el-form-item label="是否应届毕业生" prop="isGraduate">
        <el-select v-model="formData.isGraduate" placeholder="请选择">
          <el-option label="是" value="是"></el-option>
          <el-option label="否" value="否"></el-option>
        </el-select>
      </el-form-item>
      <!-- 初中毕业学校地址 -->
      <el-form-item label="初中毕业学校地址">
        <el-row :gutter="10">
          <el-col :span="8">
            <el-select v-model="formData.schoolProvince" placeholder="--请选择省--">
              <el-option v-for="province in provinces" :key="province.value" :label="province.label" :value="province.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select v-model="formData.schoolCity" placeholder="--请选择市--">
              <el-option v-for="city in cities" :key="city.value" :label="city.label" :value="city.value"></el-option>
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select v-model="formData.schoolDistrict" placeholder="--请选择县(区)--">
              <el-option v-for="district in districts" :key="district.value" :label="district.label" :value="district.value"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 邮寄信息部分 -->
      <el-form-item label="邮寄地址" prop="address">
        <el-input v-model="formData.address"></el-input>
      </el-form-item>
      <el-form-item label="收件人姓名" prop="recipientName">
        <el-input v-model="formData.recipientName"></el-input>
      </el-form-item>
      <el-form-item label="收件人电话" prop="recipientPhone">
        <el-input v-model="formData.recipientPhone"></el-input>
      </el-form-item>
      <!-- 专业选择部分 -->
      <el-form-item label="选报专业类别" prop="majorCategory">
        <el-select v-model="formData.majorCategory" placeholder="请选择专业类别" @change="fetchMajors">
          <el-option v-for="category in majorCategories" :key="category.value" :label="category.label" :value="category.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选报专业" prop="major">
        <el-select v-model="formData.major" placeholder="请选择专业">
          <el-option v-for="major in majors" :key="major.value" :label="major.label" :value="major.value"></el-option>
        </el-select>
      </el-form-item>
      <!-- 家庭信息部分 -->
      <el-form-item label="家庭信息">
        <el-table :data="familyMembers">
          <el-table-column label="家庭成员"></el-table-column>
          <el-table-column label="移动电话">
            <template #default="scope">
              <el-input v-model="scope.row.phone" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="QQ号">
            <template #default="scope">
              <el-input v-model="scope.row.qq" size="mini"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="微信号">
            <template #default="scope">
              <el-input v-model="scope.row.wechat" size="mini"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 面试记录部分 -->
      <el-form-item label="面试记录(由工作人员填写)">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="身高">
              <el-select v-model="formData.height" placeholder="请选择身高">
                <el-option v-for="h in heightOptions" :key="h" :label="h" :value="h"></el-option>
              </el-select>
              <span>cm</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="体重">
              <el-select v-model="formData.weight" placeholder="请选择">
                <el-option v-for="w in weightOptions" :key="w" :label="w" :value="w"></el-option>
              </el-select>
              <span>kg</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="视力(左)">
              <el-input v-model.number="formData.visionLeft" placeholder="0.1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="视力(右)">
              <el-input v-model.number="formData.visionRight" placeholder="0.1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="测试人签字">
              <el-select v-model="formData.tester" placeholder="请选择测试人">
                <el-option v-for="tester in testers" :key="tester" :label="tester" :value="tester"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="鞋码">
              <el-select v-model="formData.code" placeholder="请选择鞋码">
                <el-option v-for="code in codeOptions" :key="code" :label="code" :value="code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="色觉">
              <el-select v-model="formData.colorVision" placeholder="请选择">
                <el-option v-for="cv in colorVisionOptions" :key="cv" :label="cv" :value="cv"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="身心健康">
              <el-select v-model="formData.physicalAndMentalHealth" placeholder="请选择身心健康">
                <el-option v-for="pmh in physicalAndMentalHealthOptions" :key="pmh" :label="pmh" :value="pmh"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="面试人签字">
              <el-select v-model="formData.interviewer" placeholder="请选择面试人">
                <el-option v-for="interviewer in interviewers" :key="interviewer" :label="interviewer" :value="interviewer"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <!-- 签字和意见部分 -->
      <el-form-item label="*接待组签字" prop="receptionGroupSignature">
        <el-input v-model="formData.receptionGroupSignature"></el-input>
      </el-form-item>
      <el-form-item label="*联系跟踪老师签字" prop="classTeacherSignature">
        <el-input v-model="formData.classTeacherSignature"></el-input>
      </el-form-item>
      <el-form-item label="①工作领导小组意见(由工作领导小组同意后才能办理相关手续)">
        <el-select v-model="formData.workGroupOpinion" placeholder="请选择工作领导小组意见">
          <el-option v-for="opinion in workGroupOpinionOptions" :key="opinion" :label="opinion" :value="opinion"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="③财务处意见">
        <el-select v-model="formData.financeOpinion" placeholder="请选择">
          <el-option v-for="opinion in financeOpinionOptions" :key="opinion" :label="opinion" :value="opinion"></el-option>
        </el-select>
      </el-form-item>
      <!-- 声明和时间部分 -->
      <el-form-item label="我保证以上信息经本人核对无误...">
        <el-input v-model="formData.assurance" disabled></el-input>
      </el-form-item>
      <el-form-item label="本人签字" prop="signature">
        <el-input v-model="formData.signature"></el-input>
      </el-form-item>
      <el-form-item label="时间" prop="time">
        <el-date-picker
          v-model="formData.time"
          type="datetime"
          placeholder="选择时间"
        ></el-date-picker>
      </el-form-item>
      <!-- 填表须知和招生办电话 -->
      <el-form-item label="填表须知">
        <el-input v-model="formData.notice" disabled></el-input>
      </el-form-item>
      <el-form-item label="招生办电话">
        <el-input v-model="formData.phone" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">报名</el-button>
      </el-form-item>
    </el-card>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        studentName: '',
        gender: '',
        age: '',
        birthDate: '',
        hometown: '',
        ethnicity: '',
        idCard: '',
        juniorSchool: '',
        isGraduate: '是',
        schoolProvince: '',
        schoolCity: '',
        schoolDistrict: '',
        address: '',
        recipientName: '',
        recipientPhone: '',
        majorCategory: '',
        major: '',
        selfPhone: '',
        selfQq: '',
        selfWechat: '',
        fatherPhone: '',
        fatherQq: '',
        fatherWechat: '',
        motherPhone: '',
        motherQq: '',
        motherWechat: '',
        height: '',
        weight: '',
        visionLeft: 0.1,
        visionRight: 0.1,
        tester: '',
        code: '',
        colorVision: '',
        physicalAndMentalHealth: '',
        interviewer: '',
        receptionGroupSignature: '',
        classTeacherSignature: '',
        workGroupOpinion: '',
        financeOpinion: '',
        assurance: '我保证以上信息经本人核对无误,已知晓选报专业所能考取资格证及就业方向,认同学校办学理念及管理模式,且保证本人无传染病史。',
        signature: '',
        time: new Date().toISOString().slice(0, 16),
        notice: '1. 本表由学生填写,所填写信息真实可靠,表明经学生本人核对无误后签名存档。2. 报名表、身份证上姓名必须一致,如不一致则必须有当地公安派出所的有关证明,证实确系一人,否则此表无效。3. 以上专业招生对象为应届成绩合格的初中毕业生。',
        phone: '0731-83852099'
      },
      rules: {
        studentName: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        // 其他字段的验证规则...
      },
      majorCategories: [],
      majors: [],
      provinces: [],
      cities: [],
      districts: [],
      familyMembers: [
        { label: '本人', phone: '', qq: '', wechat: '' },
        { label: '父亲', phone: '', qq: '', wechat: '' },
        { label: '母亲', phone: '', qq: '', wechat: '' }
      ],
      heightOptions: Array.from({ length: 61 }, (_, i) => 140 + i),
      weightOptions: Array.from({ length: 13 }, (_, i) => 40 + i * 5),
      codeOptions: Array.from({ length: 12 }, (_, i) => 35 + i),
      colorVisionOptions: ['正常', '色弱', '色盲'],
      physicalAndMentalHealthOptions: ['健康', '良好', '一般', '欠佳'],
      testers: ['张三', '李四', '王五'],
      interviewers: ['赵六', '孙七', '周八'],
      workGroupOpinionOptions: ['同意', '不同意', '待定'],
      financeOpinionOptions: ['通过', '不通过', '待审核']
    };
  },
  created() {
    this.fetchMajorCategories();
    this.fetchProvinces();
  },
  methods: {
    async fetchMajorCategories() {
      try {
        const response = await fetch('your - major - category - api - url');
        const data = await response.json();
        this.majorCategories = data;
      } catch (error) {
        console.error('获取专业类别失败', error);
      }
    },
    async fetchMajors() {
      if (this.formData.majorCategory) {
        try {
          const response = await fetch(`your - major - api - url?category=${this.formData.majorCategory}`);
          const data = await response.json();
          this.majors = data;
        } catch (error) {
          console.error('获取专业列表失败', error);
        }
      } else {
        this.majors = [];
      }
    },
    async fetchProvinces() {
      try {
        const response = await fetch('your - province - api - url');
        const data = await response.json();
        this.provinces = data;
      } catch (error) {
        console.error('获取省份信息失败', error);
      }
    },
    async submitForm() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          try {
            const response = await fetch('your - post - api - url', {
              method: 'POST',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify(this.formData)
            });
            const data = await response.json();
            if (response.ok) {
              this.$message.success('报名成功');
            } else {
              this.$message.error('报名失败');
            }
          } catch (error) {
            console.error('提交表单失败', error);
            this.$message.error('提交表单失败');
          }
        } else {
          return;
        }
      });
    }
  }
};
</script>

<style scoped>
.register-form {
  padding: 20px;
}
</style>